<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节</title>
    <style>
    .web{
        background-color:darkred;
        width: 100%;
        /* 页面大小 */
        padding-bottom: 300px;
    }
    .shou{
        color: black;
        padding-bottom: 20px;
        text-align:center;
        padding:100px;
    }
    .shu{
        width: 1080px;
        height:620px;
        margin:0 auto;  /*水平居中*/
        background-image: url(背景图片/烟花.jpg );
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius:30px;
        padding-top: 20px;
    }

    .A{
        width:100%;
    }
    .B{
        width: 1200px;
        margin:0 auto;  /*水平居中*/
    }
    .C{
        margin:0 auto;  /*水平居中*/
        border-radius:30px;
        height: 4600px;
        background-color:whitesmoke;
    }
    .box{
        background-color:darkred;
        height:80px;
        font-weight: 300;
        font-size: 20px;
        font-family: 正楷;
        padding-bottom: 10px;
    }
    .box ul{
        padding: 0px;
        width: 800px;
        margin: 0 auto;
    }
    .box ul li{
        line-height: 50px;
        float: left;
        font-size:25px;
        color:gold;
    }
    .box ul li a{
        text-decoration: none;
        font-size:25px;
        color:gold;
        margin: 0 10px;
    }
    .box1{
        height: 800px;

    }
    .video{
        float: center;
        margin-right: 30px;
    }
    .wenzi{
        width: 625px;
        height: 500px;
        float: left;
    }
    .XN{
        font-size:60px;
        font-family:华文行楷;

    }
    .XN2{
        padding-top: 50px;
        font-size:16px;
        line-height:35px;

    }
    .title{
        height:120px;
        line-height: 120px;
        text-align: center;
        font-size: 36px;
    }
    .box2 {
        height:600px;
    }
    .box2-left {
        width: 507px;
        height: 330px;
        float: left;
        margin-left: 30px;
    }
    .box2-left p {
        float: left;
        line-height: 35px;
        font-size: 18px;
        padding-right: 60px;
    }
    .box2-right {
        width: 630px;
        height: 330px;
        float: left;
    }
    .box3 {
        height: 380px;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .box3-left {
        width: 537px;
        height: 380px;
        float: left;
    }
    .box3-left img {
        display: block;
        float: right;
    }
    .box3-right {
        width: 630px;
        height: 400px;
        float: left;
    }
    .box3-right p {
        margin-top: 80px;
        margin-left: 63px;
        line-height: 35px;
        font-size: 18px;
        font-family: "微软雅黑";
    }
    
    .m1 {
        line-height: 50px;
        float: left;
        font-size:25px;
        color:gold;
    }
    .m2 {
        line-height: 50px;
        float: center;
        font-size:100px;
        color:gold;
        font-family:华文行楷;
    }
    .m3 {
        font-family:方正舒体;
        font-size:60px;
    } 
    .m4 {
        font-family:STKaiti;
        font-size:60px;
        float: center;
    }
    .v {
        left: 50%;
        margin-left: -300px;
    }
    *{
    padding:0;
    margin:0;
    }
    .mylunbo{
        margin:20px auto;
        position: relative;
        width: 720px;
        height: 432px;
        /*background-color: purple;*/
        overflow: hidden;
    }
    .mylunbo ul{
        position: absolute;
        top: 0;
        left: 0;
        width:500%;
    }
    ul li{
        float:left;
        list-style-type: none;
    }
    ol li{
        list-style-type: none;
    }
    .arrow-l,
    .arrow-r {
        display: none;
        position: absolute;
        top: 50%;
        margin-top: -20px;/*高度40，上移20*/
        width: 24px;
        height: 40px;
        background: rgba(0, 0, 0, .3);
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-family: 'icomoon';
        font-size: 18px;
        z-index: 2;
    }
    .arrow-r {
        right: 0;
    }
    .circle {
        position: absolute;
        bottom: 10px;
        left: 350px;
    }
    .circle li {
        float: left;
        width: 8px;
        height: 8px;
        /*background-color: #fff;*/
        border: 2px solid rgba(240, 120, 120, 0.5);
        margin: 0 3px;
        border-radius: 50%;
        /*鼠标经过显示小手*/
        cursor: pointer;
    }
    .current {
        background-color: #fff;
    }
    a:hover{
        color:red;
    }
    </style>
    <script>
        function animate(obj,length,callback){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var step=(length-obj.offsetLeft)/10; // 缓动效果，步长=（目标值-当前值）/10
        step=step>0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==length){
            clearInterval(obj.timer);
            if(callback)
                callback();
            //callback && callback()
        }
            obj.style.left=obj.offsetLeft+step+'px';
        },15);
}

window.addEventListener('load',function(){
    const lunbo=document.querySelector(".mylunbo");
    const arrowl=document.querySelector(".arrow-l");
    const arrowr=document.querySelector(".arrow-r");
    var num=0;  // 左右移动按钮定位图片
    var circle=0;  // 定位小圆点
    var flag=true;  // 节流阀
    //1、右侧按钮，左侧按钮
    lunbo.addEventListener('mouseenter',function(){
        arrowl.style.display='block';
        arrowr.style.display='block';
        clearInterval(timer);  // 清楚计时器，轮播图不自动播放
        //timer=null;  // 清楚timer变量
    });
    lunbo.addEventListener('mouseleave',function(){
        arrowl.style.display='none';
        arrowr.style.display='none';
        timer=setInterval(function(){
            arrowr.click();
        },2000);
    });
    //2、创建小圆点
    const ul=lunbo.querySelector("ul");
    const ol=lunbo.querySelector("ol");
    for(let i=0;i<ul.children.length;i++){  // 根据图片数量生成小圆点
        let li=document.createElement("li");
        li.setAttribute('index',i);  // 添加自定义属性index
        ol.appendChild(li);
        //3、添加小圆圈点击事件
        li.onclick=function(){
            for(let i=0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            this.className='current';
            //4、小圆圈动画
            let lunbowidth=lunbo.offsetWidth;
            let index=this.getAttribute('index');
            num=circle=index;  // 点击小圆点时，将num和circle的值赋值为index，即将小圆点顺序和左右按钮的num定位到当前图片
            animate(ul,-index*lunbowidth);  // 调用动画函数，-index*lunboWidth为终点位置
        }
    }
    //5、克隆子元素-->ABCDA，此时最后一张图为第一张图的复制！！
    let child=ul.children[0].cloneNode(true);
    ul.appendChild(child);
    ol.children[0].className='current';
    //6、右侧按钮点击事件
    arrowr.addEventListener('click',function(){
        if(flag){
            flag=false;  // 未完成轮播动画，不能轮播，设置为false
            if(num==ul.children.length-1){
                ul.style.left=0;  // 当点击到最后一个图片时，即和第一幅图相同的那张，num为ul.children.length-1,先切换到第一张(很快),执行动画切换到第二张
                num=0;  // num重新设为0，后面再加1
            }
            num++;
            animate(ul,-num*lunbo.offsetWidth,function(){
                flag=true;  // 将flag设置为true，可以再次点击轮播
            });
            circle++;
            if(circle==ol.children.length)  // 当小圆圈移动到最后，点击右移，circle+1,此时circle为ol.children.length
                circle=0;
            setCurrent();
        }
    })
    //7、左侧点击事件
    arrowl.addEventListener('click',function(){
        if(flag){
            flag=false;
            if(num==0){
                num=ul.children.length-1;  // 当轮播图为第一张图时，num设为最后一张图的index，之后再减一
                ul.style.left=-num*lunbo.offsetWidth+'px';  // 先切换到最后一张图，之后再调用动画函数到实际倒数第二图
            }
            num--;
            animate(ul,-num*lunbo.offsetWidth,function(){
                flag=true;
            });
            circle--;
            if(circle==-1)  // 当小圆圈在第一个位置时，点击左移，circle-1，此时circle为-1
                circle=ol.children.length-1;
            setCurrent();
        }
    });
    var timer=setInterval(function(){
        arrowr.click();
    },2000);
    function setCurrent(){
        for(let i=0;i<ol.children.length;i++){
            ol.children[i].className='';
        }
        ol.children[circle].className='current';
    }
})
    </script>
</head>
<body>
    <!--首页上部分-->
    <div class="web"> 	<!--底部背景颜色-->
        <div class="shou">
            <span class="m2">春节</span>
            <br><br>
            <p>Spring Festival</p>
            <div class="box">
                
                
                <span>
                    <a href="https://www.suse.edu.cn/" target="blank" title="点击跳往官网"> <p class="m1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;四川轻化工大学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p></a> 
                </span>
                
                <span>
                    <a href="http://www.westsec.com.cn/" target="blank" title="点击跳往官网"> <p class="m1">成都国信安信息产业基地有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p></a>
                </span>

                <span>
                    <a href="another.html" target="_self" title="点击跳往另一个html文件"><p class="m1">年味黯淡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p></a>
                </span>
                
            
            </div>
                   
            <div class="mylunbo">
                <a href="javascript:;" class="arrow-l"></a>
                <a href="javascript:;" class="arrow-r">></a>
                <ul>
                    <li>
                        <a href="#"><img src="https://caxyf.gitee.io/guoxinan/images/fire.jpg" width="720" height="432" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="https://caxyf.gitee.io/guoxinan/images/light.jpg" width="720" height="432" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="https://caxyf.gitee.io/guoxinan/images/fire2.webp" width="720" height="432" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="https://caxyf.gitee.io/guoxinan/images/dr.webp" width="720" height="432" alt="" /></a>
                    </li>
                </ul>
                <ol class="circle">
        
                </ol>
            </div>
        
    <!--首页下部分-->   
        <div class="A">
        <div class="B">
        <div class="C">
            <div>
                <p class="XN2" >
                    <span class="m3">春节</span>
                       是中国民间最隆重盛大的传统节日，是集祈福攘灾、欢庆娱乐和饮食为一体的民俗大节。 春节历史悠久，由上古时代岁首祈岁祭祀演变而来，在传承发展中承载了丰厚的历史文化底蕴。 新春贺岁活动围绕祭祝祈年为中心，以除旧布新、拜神祭祖、驱邪攘灾、祈求丰年等形式展开，内容丰富多彩，热闹喜庆，年味浓郁，凝聚着中华文明的传统文化精华。</p>
                       <p >
                        早期的节日文化，反映的是古人自然崇拜、天人合一、慎终追远、固本思源的人文精神；一系列的祭祀活动，则蕴含着礼乐文明的深邃文化内涵。“年”的概念，来自上古历法，《盘古王表》与《三命通会》均有载：“天皇氏始制干支之名，以定岁之所在”。古人根据天地运行规律来确定四季循环的起点与终点，“年”成为一年四季的时间总称。地球绕太阳一周，历法上叫一年，循环往复，永无止境。人们根据春、夏、秋、冬四季节气的不同，定出一年之岁首。原始意义上的岁首是指干支历法的“立春”，当天象“斗柄指寅”时，万物苏萌，天下皆春。所以有了春节。
                       </p>
                       <p>
                        春节的起源有一个传说，在中国古代有一个叫“年”的怪物，头长触角，凶猛异常。“年”一直生活在海底深处，每当除夕爬上岸，吞噬牲畜，危害人类生命。因此，每一天的除夕，村里的人们都要逃到山里，老人和年轻人，以避免“年”兽的伤害。有一年的新年前夜，村子外传来乞讨老人的消息。当村民们急于惊慌时，村里只有一位老太婆给老人一些食物，劝他上山躲避那只年兽。老人笑着说：“如果我岳母让我整晚呆在家里，我一定会把那只年兽送走。”老妇人继续劝说，乞求老人笑但什么也不说。半夜，“年”兽闯进了村子。它发现村里的气氛与往年不同：村东老妇人的房子，门贴着红色的纸，房子的烛光。“年”兽全身颤抖，奇怪地叫喊。走近门，院子突然听到“砰砰”的声音。“年”浑身发抖，不敢往前走。原来，“年”最怕的是红、火和爆炸。这时，婆婆的门大开，看见院子里穿着红色长袍的老人在笑。“年”吓了一跳，挣扎着走开了。第二天是第一个月的第一天。避难的人们惊讶地看到这个村子安然无恙。这时，老太婆突然意识到，急忙告诉村民们乞讨老人的承诺。这个故事很快就传遍了周围的村庄，人们知道如何赶走今年的野兽。
                        （客家传说）从除夕起，家家户户都贴上红对联，放鞭炮；家居烛光，守候新年。在第一天的清晨，我想去向我的朋友们问好。这种习俗越来越广泛，成为中国最盛大的传统节日。
                </p>
            </div>

            <div height="600px" >
                <div class="wenzi">
                    
                    <p class="XN2">
                     <span class="m3">小年</span>
                        农历十二月二十三和二十四，是中国民间传统的祭灶日，又称“小年”。民间祭灶，源于古人拜火习俗。如《释名》中说：“灶。造也，创食物也。”灶神的职责就是执掌灶火，管理饮食，后来扩大为考察人间善恶，以降福祸。灶神信仰是民间百姓对“衣食有余”梦想追求的反映。据我国晋代名人周处所作的地方风物志《风土记》记载：“腊月二十四日夜，祀灶，谓灶神翌日上天，白一岁事，故先一日祀之。” 
                        关于过小年的文字记载最早见于东汉，东汉崔定《四民月令》载：“腊明日更新，谓之小岁，进酒尊长，修贺君师。”小年也是阖家团聚的日子，家庭宴饮，燃放鞭炮，其活动类似过大年，只是不出门拜贺。传说中灶王每年腊月小年要上天汇报，大年三十再回到灶底，百姓觉得要敬重灶王才有了祭灶这一风俗，来祈求来年平安和财运。此后祭祀灶神逐渐成为过小年的主要活动内容沿袭至今。</p>
                </div>
                <div class="box3-left img">
                    <img src="https://img2.baidu.com/it/u=3371934646,3376551170&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334">
                </div>
            </div>
            
                <video  class="v" controls="controuls"  autoplay="autoplay" height=" 300" width="500">
                    <source src="https://caxyf.gitee.io/guoxinan/return.avi" type="" />
                </video> 
                    
                
            
            <hr />
            <div class="title">
                <p class="m4">
                    春节习俗
                </p>
            </div>
            <div class="box2">
                <div class="box2-left">
                    <span class="m3">除旧迎新</span>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; “岁”的最后一天，称为“岁除”，那天晚上叫“除夕”。它与新年首尾相连，谓之“挨年近晚、岁穷月尽”，是新一年的前夕，是除旧迎新的重要时间交界点。“除夕”是岁除之夜的意思，又称大年夜、除夕夜、除夜等，时值年尾的最后一个晚上。此期间以除旧布新为活动主题，自古就有贴年红、祭祖、团圆饭、守岁等习俗，经久不息。除夕是除旧布新、阖家团圆、祭祀祖先的日子，与清明节、七月半、重阳节并称为中国民间四大传统祭祖大节。
                    岁除之日，民间尤为重视，除旧布新、迎接新年。家家户户忙忙碌碌清扫庭舍、张灯结彩，迎祖宗回家过年，并以年糕、三牲饭菜及三茶五酒奉祀。除夕，在国人心中是具有特殊意义的，这个年尾最重要的日子，漂泊再远的游子也是要赶着回家去和家人团聚，在爆竹声中辞旧岁，烟花满天迎新春。</p>
                </div>
                        <div class="box2-right">
                            <img src="https://img0.baidu.com/it/u=3815565162,1237790734&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=231"></div>
                        </div>
                <div class="box3">
                        <div class="box3-left">
                            <img src="https://caxyf.gitee.io/guoxinan/images/aces.jpeg"width="400" height="291">
                        </div>
                
                <div class="box3-right">
                    <span class="m3">拜神祭祖</span>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 除夕祭祖是过年重要习俗之一，中华民族自古就有慎终追远的传统，过节总不会忘记祭拜祖先，报祭祖先的恩德。除夕，人们会摆上菜肴、倒上美酒，举行隆重的祭祀仪式，以此表达对先人的怀念并祈求祖先的庇佑，这一传统习俗代代相传。祭祀祖先，不仅涵盖了中国所有的古老传统节日，也是中国民俗节日永远的主题。
                        祭祖的形式各有不同，有的到宗祠拜祖，而大多在家中将祖先牌位依次摆在正厅，陈列供品，然后祭拜者按长幼的顺序上香跪拜。祭祖，多半做鱼肉碗菜，盛以高碗，颇有钟鸣鼎食之意。</p>
                </div>
                <div class="box2-left">
                    <span class="m3">年夜饭</span>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 年夜饭，是年节习俗之一，又称年晚饭、团年饭、团圆饭等，特指年尾除夕的阖家聚餐。年夜饭源于古代的年终祭祀仪式，拜祭神灵与祖先后团圆聚餐。团年饭是年前的重头戏，不但丰富多彩，而且很讲究意头。吃团年饭前先拜神祭祖，待拜祭仪式完毕后才开饭。席上一般有鸡（寓意有计）、鱼（寓年年有余）、蚝豉（寓好市）、发菜（寓发财）、腐竹（寓富足）、莲藕（寓聪明）、生菜（寓生财）、生蒜（寓会计算）等以求吉利。中国人的年夜饭是家人的团圆聚餐，这顿是年尾最丰盛、最重要的一顿晚餐</p>
                </div>
                        <div class="box2-right">
                            <br><br><br><br><br><br>
                            <img src="https://caxyf.gitee.io/guoxinan/images/year.webp" width="427" height="284"></div>
                        
                </div>

                <div class="box3">
                    <div class="box3-left">
                        <br><br><br><br><br><br><br><br>
                        <img src="https://caxyf.gitee.io/guoxinan/images/latten.jfif"width="" height="">
                    </div>
            
                <div class="box3-right">
                    <br><br><br><br>
                    <span class="m3">灯会</span>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 每年农历的正月十五日，迎来的就是中国传统节日——元宵节。正月是农历的元月，古人称夜为“宵”，所以称正月十五为元宵节。正月十五日是一年中第一个月圆之夜，也是一元复始，大地回春的夜晚，人们对此加以庆祝，也是庆贺新春的延续。元宵节又称为“上元节”。按中国民间的传统，在这天上皓月高悬的夜晚，人们要点起彩灯万盏，以示庆贺。出门赏月、燃灯放焰、喜猜灯谜、共吃元宵，合家团聚、同庆佳节，其乐融融。
                        根据文献记载，早在南朝伊始，国都南京城内就举办过元宵灯会，是中国最早记载的灯会。为了祈求风调雨顺、家庭美满和天下太平，张灯结彩的景况，开始从深宫禁苑、宗教场所走向民间大众，“灯火满市井”的场景颇为壮观。对此，梁简文帝萧纲、陈后主等都曾用生动的诗歌，描绘了南朝利用灯彩来增添节日气氛的社会风尚。</p>
                </div>
                <div class="box2-left">
                    <br><br><br><br><br><br><br><br>
                    <span class="m3">贴年红</span>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 贴年红，即是贴春联、门神、年画、福字、横批、窗花等的统称，因这些是过年时贴的红色喜庆元素，所以统称为“贴年红”。贴年红是中华传统过年习俗，它反映了人民大众的风俗和信仰，增添喜庆的节日气氛，并寄予着人们对新年新生活的美好期盼。
                        门神：最初的门神是刻桃木为人形，挂在人的旁边，后来是画成门神人像张贴于门。传说中的神荼、郁垒兄弟二人专门管鬼，有他们守住门户，大小恶鬼不敢入门为害。唐代以后，又有画猛将秦琼、尉迟敬德二人像为门神的，还有画关羽、张飞像为门神的。门神像左右户各一张。后代常把一对门神画成一文一武。
                        春联：即对联，亦名“门对”、“联对”、“桃符”等。一说春联来源于桃符；另一来源是春贴，古人在立春日多贴“宜春”二字，后渐渐发展为春联。每逢春节，无论城市还是农村，家家户户都要精选一幅大红春联贴于门上，为节日增加喜庆气氛。  
                        年画：春节挂贴年画在城乡也很普遍，浓黑重彩的年画给千家万户平添了许多兴旺欢乐的喜庆气氛。这些都具有祈福、装点居所的民俗功能。年画是中国的一种古老的民间艺术。 
                        窗花：新春佳节时，许多地区的人们喜欢在窗户上贴上各种剪纸：窗花。窗花不仅烘托了喜庆的节日气氛，而且也为人们带来了美的享受，集装饰性、欣赏性和实用性于一体。
                        吊钱：贴吊钱的历史由来已久，因名称中带有“钱”字，把它们挂在门前檐下，预示着新的一年中财源会滚滚而来。 
                        倒“福”字：每逢新春佳节，有的地方家家户户都要在屋门上、墙壁上、门楣上贴上大大小小的倒"福"字。春节贴倒"福"字，取其谐音“福到了”，是民间由来已久的风俗。
                        横批：横批是指同对联相配的横幅，一般仅用于少数有此必要的楹联。所谓“横”，指的是横写的书写方式；“批”，含有揭示、评论之意，指的是对整副对联的主题内容起补充、概括、提高作用</p>
                </div>
                        <div class="box2-right">
                            <br><br><br><br><br><br><br><br><br><br><br><br><br>
                            <img src="https://caxyf.gitee.io/guoxinan/images/papercut.jfif" width="571" height="800"></div>
                        
                </div>
            
                

        </div>
        </div>
        </div>
        
    </div>
</body>
</html>